<template>
  <div class="sidebar">
    <div v-if="infos.plateMode == 3" class="logo"><img src="../assets/img/logo1.png">
        <!-- {{platformName}} -->
    </div>
    <div v-if="infos.plateMode != 3" class="logoAuto"><img src="../assets/img/logo.png">
        {{platformName}}
    </div>
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#212D4B"
      text-color="rgba(255, 255, 255, 0.66)"
      active-text-color="#fff"
      unique-opened
      router
    >
      <template v-for="item in items">
        <el-menu-item
          :index="item.index"
          :key="item.index"
          v-if="item.children.length == 0"
          class="sidebarNav"
        >
          <img width="14" height="14" :src="item.img" />
          <img width="14" height="14" class="imgHOver" :src="item.imgHOver" />
          <template #title>{{ item.title }}</template>
        </el-menu-item>
        <el-submenu :index="item.index" :key="item.index" v-else>
          <template #title>
            <img width="14" height="14" :src="item.img" />
            <img width="14" height="14" class="imgHOver" :src="item.imgHOver" />
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="chl in item.children"
              :key="chl.index"
              :index="chl.index"
              class="sidebarNav"
              >{{ chl.title }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
// import bus from "../common/bus";
export default {
  data() {
    return {
      platformName: '',
      infos: JSON.parse(localStorage.getItem("bussines_info")),
      logoUrl: '',
      logoAuto: false,
      items: [
        {
          img: require("../assets/img/sidebar1.png"),
          imgHOver: require("../assets/img/sidebar01.png"),
          index: "index",
          title: "首页",
          children: [],
          details: []
        },
        {
          img: require("../assets/img/sidebar4.png"),
          imgHOver: require("../assets/img/sidebar04.png"),
          title: "关注管理",
          index: "follow",
          hidden: 1,
          details: [],
          children: [
            {
              index: "AlreadyFollow",
              title: "关注列表",
              details: ['AlreadyDetails']
            },
            // {
            //   index: "ToexamineFollow",
            //   title: "审核列表",
            //   details: ['ToexamineDetails']
            // },
          ],
        },
        {
          img: require("../assets/img/renwujianying.png"),
          imgHOver: require("../assets/img/renwujianying1.png"),
          index: "task",
          title: "任务管理",
          details: [],
          hidden: 1,
          children: [
            {
              index: "ListTask",
              title: "任务列表",
              details: ['ReceiveDetails']
            },
            {
              index: "AcceptanceTask",
              title: "任务验收",
              details: []
            },
            {
              index: "SettlementTask",
              title: "任务结算",
              details: []
            },
          ],
        },
        {
          img: require("../assets/img/sidebar8.png"),
          imgHOver: require("../assets/img/sidebar08.png"),
          index: "project",
          title: "项目管理",
          hidden: 2,
          details: [],
          children: [
            {
              index: "project",
              title: "项目管理",
              details: []
            },
          ],
        },
        {
          img: require("../assets/img/caiwu.png"),
          imgHOver: require("../assets/img/caiwu1.png"),
          index: "settlements",
          title: "财务管理",
          hidden: 2,
          details: [],
          children: [
            {
              index: "settlements",
              title: "无感发薪结算单",
              details: []
            },
            {
              index: "Invoices",
              title: "发票管理",
              details: []
            },
            {
              index: "examine",
              title: "打款记录",
              details: []
            },
            {
              index: "recharge",
              title: "充值记录",
              details: []
            },
          ],
        },
        {
          img: require("../assets/img/caiwu.png"),
          imgHOver: require("../assets/img/caiwu1.png"),
          index: "finace",
          title: "财务管理",
          hidden: 0,
          details: [],
          children: [
            {
              index: "Billing",
              title: "账单结算",
              details: []
            },
            {
              index: "Invoice",
              title: "发票管理",
              details: []
            },
            {
              index: "examine",
              title: "打款记录",
              details: []
            },
            {
              index: "recharge",
              title: "充值记录",
              details: []
            },
          ],
        },
        {
          img: require("../assets/img/sidebar10.png"),
          imgHOver: require("../assets/img/sidebar11.png"),
          index: "10",
          title: "日志管理",
					details: [],
          children: [
            {
                index: "loginLog",
                title: "登录日志",
                details: []
            },
            {
                index: "operationLog",
                title: "操作日志",
                details: []
            }
          ]
      }
      ],
    };
  },
  mounted() {

    // let info = {
    //   plateMode: 3
    // }
    // console.log(info.plateMode)
    
    let info = JSON.parse(localStorage.getItem("bussines_info"))

    this.platformName = info.platformName

    if(this.platformName.length >= 7 ){
        this.logoAuto = true;
    }
    if(this.$store.state.userInfo.platformName.length >= 7 ){
      this.logoAuto = true;
    }
    if(this.$store.state.userInfo.logoUrl == null){
      this.logoUrl = require("../assets/img/photo.jpg")
    }else if(this.$store.state.userInfo.platformName == '浪潮灵工云'){
      this.logoUrl = require("../assets/img/logo1.png")
    }else {
      this.logoUrl = this.$store.state.userInfo.logoUrl
    }

    for (let i = this.items.length -1; i >=0; i--) {  
      if (info.plateMode === 3) {
        console.log(333)
        if (this.items[i].hidden === 0 || this.items[i].hidden === 1) this.items.splice(i, 1);  
      }else if (info.plateMode === 1) {
        console.log(111)
        if (this.items[i].hidden === 2) this.items.splice(i, 1);  
      } else  {
        console.log(222)
         if (this.items[i].hidden === 2) this.items.splice(i, 1);  
      }
    }  
  },
  computed: {
    onRoutes() {
      // 根据route地址判断左侧导航选中
      let path = this.$route.path.replace("/", "");
      
      let rPath = "";
      for (let i = 0; i < this.items.length; i++) {
        let item = this.items[i];
        if (item.index == path || item.details.includes(path)) {
          rPath = item.index;
        }else {
          for(let k = 0; k < item.children.length; k++) {
            if(item.children[k].index == path || item.children[k].details.includes(path)) {
              rPath = item.children[k].index;
            }
          }
        }
      }
      return rPath;
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
};
</script>

<style scoped>
li.sidebarNav.el-menu-item.is-active {
  background: #026be4 !important;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
  z-index: 1;
  width: 14%;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 100%;
  border: 0;
}
.sidebar > ul {
  height: 100%;
}
.el-menu-item [class^="el-icon-"] {
  position: relative;
  top: -2px;
}
.logo,.logoAuto {
  background: rgb(33, 45, 75);
  color: #fff;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
}
.logoAuto {
  font-size: 16px;
}
.logo img {
  /* width: 40px; */
  height: 30px;
    float: left;
    margin: 20px 10px 0 20px;
  /* border-radius: 100%; */
}
.logoAuto img {
  width: 40px;
    float: left;
    margin: 12px 10px 0 20px;
  border-radius: 100%;
}
.sidebar-el-menu[data-v-7d622f5c]:not(.el-menu--collapse) {
  width: 100%;
}
.el-menu-item img {
  margin: -3px 9px 0 0;
}
.el-menu-item img.imgHOver,
.el-menu-item.is-active img {
  display: none;
}
.el-menu-item.is-active img.imgHOver {
  display: inline-block;
}
.el-submenu img.imgHOver,
.el-submenu.is-opened img {
  display: none;
}
.el-submenu.is-opened img.imgHOver {
  display: inline-block;
}
.el-submenu img {
  margin: 2px 9px 0 0;
}
.is-opened .el-submenu__title * {
  color: #fff !important;
}
</style>
